<template>
    <view class="topic-square-main">
        <header-vue bgColor="transparent" :back="true"></header-vue>
        <!-- 装饰图标 -->
        <image class="main-icon" :src="IMAGE_URL + '/static/community/icon16.png'" mode="aspectFit"></image>
        
        <view class="box-con">
            <view class="title">
                <u-image :src="IMAGE_URL + '/static/community/icon17.png'" width="271rpx" height="100rpx"></u-image>
                <text class="tit-txt">雄安人今天都在讨论这些事</text>
            </view>

            <view class="list">
                <view v-for="(item, index) in topicList" :key="item.id" @click="openDetail(item)">
                    <!-- 第一条大卡片样式 -->
                    <view v-if="index === 0" class="hero-card" :style="{backgroundImage: 'url('+ item.image_urls[0] + ')'}">
                        <view class="hero-title">{{ item.title }}</view>
                        <view class="hero-bullets">
                            <view class="bullet" v-for="(c, ci) in commentList" :key="ci">
                                <u-image :src="c.member.userpic" width="40rpx" height="40rpx" radius="40rpx"></u-image>
                                <text class="bullet-text">{{ c.content }}</text>
                            </view>
                        </view>
                    </view>
                    <!-- 其余小卡片样式 -->
                    <view v-else class="topic-card">
                        <u-image :src="item.image_urls[0]" width="160rpx" height="160rpx" mode="aspectFill" radius="16rpx"></u-image>
                        <view class="content">
                            <view class="title">{{ item.title }}</view>
                            <view class="meta">
                                <view class="meta-avatars">
                                    <u-image 
                                        v-for="(a, ai) in item.comment_avatars" :key="ai"
                                        :src="a" 
                                        width="32rpx" 
                                        height="32rpx" 
                                        radius="50%" 
                                        mode="aspectFill" 
                                        class="avatar small">
                                    </u-image>
                                </view>
                                <text class="meta-text">{{ item.comment_count }}人讨论</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <u-loadmore :status="loadStatus" loading-text="加载中" loadmore-text="上拉加载更多" nomore-text="已经全部加载"></u-loadmore>
        </view>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import appConfig from '@/config/app.js'
import { getCommunitynewsTopicSquare, getCommunitynewsTopicComments, getCommunitynewsSearch } from '@/api/index.js'
export default {
    components: { headerVue },
    data() {
        return {
            IMAGE_URL: appConfig.IMAGE_URL,
            topicList: [],
            page: 1,
            limit: 10,
            isLoading: false,
            isFinished: false,
            commentList: [],
            isSearch: false,
            searchKeyword: ''
        }
    },
    onLoad(option) {
        if (option.keyword) {
            this.isSearch = true
            this.searchKeyword = option.keyword
            this.resetAndSearch()
        } else {
            this.getCommunitynewsTopicSquareEvent(false)
        }
    },
    onReachBottom() {
        this.loadMore()
    },
    computed: {
        loadStatus() {
            return this.isFinished ? 'nomore' : (this.isLoading ? 'loading' : 'loadmore')
        }
    },
    methods: {
        async getCommunitynewsSearchEvent(val, append = false) {
            if (this.isLoading || this.isFinished) return
            if (typeof val === 'string') this.searchKeyword = val
            const keyword = this.searchKeyword
            this.isLoading = true
            try {
                const res = await getCommunitynewsSearch({
                    page: this.page,
                    limit: this.limit,
                    keyword
                })
                const list = (res && Array.isArray(res.data)) ? res.data : []
                const normalized = list.map((item) => {
                    let imgs = []
                    const raw = item.image_urls
                    if (Array.isArray(raw)) {
                        imgs = raw
                    } else if (typeof raw === 'string') {
                        const s = raw.trim()
                        if (s) {
                            try {
                                const parsed = JSON.parse(s)
                                if (Array.isArray(parsed)) imgs = parsed
                            } catch (e) {
                                imgs = s.includes(',') ? s.split(',').map(x => x.trim()).filter(Boolean) : (s ? [s] : [])
                            }
                        }
                    }
                    item.image_urls = imgs
                    return item
                })
                console.log(list)
                if (append) {
                    this.topicList = this.topicList.concat(normalized)
                } else {
                    this.topicList = normalized
                }
                if (normalized.length < this.limit) {
                    this.isFinished = true
                }
                if (this.topicList.length === 0 && this.page === 1) {
                    uni.showToast({ title: '暂无相关数据', icon: 'none' })
                    this.commentList = []
                } else if (this.page === 1 && this.topicList[0]) {
                    this.getCommunitynewsTopicCommentsEvent(this.topicList[0].id)
                }
            } finally {
                this.isLoading = false
            }
        },

        async getCommunitynewsTopicCommentsEvent(id) {
            const res = await getCommunitynewsTopicComments(id, {
                page: 1,
                limit: 3
            })
            const list = (res && res.data && Array.isArray(res.data.list)) ? res.data.list : []
            this.commentList = list
        },
        openDetail(item) {
            uni.navigateTo({ url: `/views/community/topic-square-detail?id=${item.id}` })
        },
        async getCommunitynewsTopicSquareEvent(append = false) {
            if (this.isLoading || this.isFinished) return
            this.isLoading = true
            try {
                const res = await getCommunitynewsTopicSquare({
                    page: this.page,
                    limit: this.limit
                })
                const list = (res && res.data && Array.isArray(res.data.list)) ? res.data.list : []
                const normalized = list.map((item) => {
                    let imgs = []
                    const raw = item.image_urls
                    if (Array.isArray(raw)) {
                        imgs = raw
                    } else if (typeof raw === 'string') {
                        const s = raw.trim()
                        if (s) {
                            try {
                                const parsed = JSON.parse(s)
                                if (Array.isArray(parsed)) imgs = parsed
                            } catch (e) {
                                imgs = s.includes(',') ? s.split(',').map(x => x.trim()).filter(Boolean) : (s ? [s] : [])
                            }
                        }
                    }
                    item.image_urls = imgs
                    return item
                })
                if (append) {
                    this.topicList = this.topicList.concat(normalized)
                } else {
                    this.topicList = normalized
                }
                if (normalized.length < this.limit) {
                    this.isFinished = true
                }
                if (this.topicList[0]) {
                    this.getCommunitynewsTopicCommentsEvent(this.topicList[0].id)
                }
            } finally {
                this.isLoading = false
            }
        },
        loadMore() {
            if (this.isLoading || this.isFinished) return
            this.page += 1
            if (this.isSearch) {
                this.getCommunitynewsSearchEvent(undefined, true)
            } else {
                this.getCommunitynewsTopicSquareEvent(true)
            }
        },
        resetAndSearch() {
            this.page = 1
            this.isFinished = false
            this.topicList = []
            this.getCommunitynewsSearchEvent(this.searchKeyword, false)
        }
    }
}
</script>
<style lang="scss" scoped>
.topic-square-main {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.main-icon {
    position: absolute;
    pointer-events: none;
    right: 36rpx;
    top: 62rpx;
    width: 277rpx;
    height: 260rpx;
    z-index: 1;
}

    .box-con {
        padding: 0 32rpx;

        .title {
            .tit-txt {
                font-size: 28rpx;
                color: #666666;
                margin-top: 8rpx;
            }
        }

        .list {
            margin-top: 60rpx;
        }

        /* 第一条大卡片 */
        .hero-card {
            position: relative;
            height: 400rpx;
            background: rgba(0,0,0,0.24);
            border-radius: 48rpx 16rpx 48rpx 16rpx;
            overflow: hidden;
            margin-bottom: 20rpx;
            padding: 36rpx 28rpx;
            box-sizing: border-box;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            .hero-img {
                width: 100%;
                height: 100%;
                display: block;
            }

            .hero-mask {
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.05));
            }

            .hero-title {
                color: #fff;
                font-size: 40rpx;
                text-align: justify;
                line-height: 1.4;
            }

            .hero-bullets {
                position: absolute;
                left: 16rpx;
                right: 16rpx;
                bottom: 16rpx;
                display: flex;
                flex-direction: column;
                gap: 12rpx;
            }

            .bullet {
                display: flex;
                align-items: center;
                border-radius: 999rpx;
                padding: 8rpx 12rpx;
            }

            .avatar-group {
                display: flex;
                margin-right: 8rpx;
            }

            .avatar {
                width: 32rpx;
                height: 32rpx;
                border-radius: 50%;
                border: 2rpx solid #fff;
                margin-left: -6rpx;
            }

            .bullet-text {
                color: #fff;
                font-size: 24rpx;
                margin-left: 12rpx;
                width: 360rpx;
                height: 40rpx;
                background: rgba(255,255,255,0.2);
                border-radius: 16rpx 16rpx 16rpx 4rpx;
                padding-left: 12rpx;
                line-height: 40rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                backdrop-filter: blur(40rpx);
            }
        }

        /* 其余卡片 */
        .topic-card {
            display: flex;
            align-items: center;
            padding: 20rpx;
            background: rgba(13, 163, 255, 0.08);
            border-radius: 16rpx;
            margin-bottom: 18rpx;

            .thumb {
                width: 156rpx;
                height: 110rpx;
                border-radius: 12rpx;
                flex-shrink: 0;
            }

            .content {
                height: 160rpx;
                margin-left: 16rpx;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }

            .title {
                color: #333;
                font-size: 28rpx;
                font-weight: 600;
                line-height: 1.4;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .meta {
                display: flex;
                align-items: center;
                margin-top: 10rpx;
            }

            .meta-avatars {
                display: flex;
                margin-right: 8rpx;
            }

            .avatar.small {
                position: relative;
                border-radius: 50%;
                border: 2rpx solid #fff;

                &:nth-child(2) {
                    margin-left: -16rpx;
                    z-index: 2;
                }
                &:nth-child(3) {
                    margin-left: -16rpx;
                    z-index: 3;
                }
            }

            .meta-text {
                color: #999;
                font-size: 24rpx;
            }
        }
    }
</style>